<template>
    <view class="page">
        <view class="logo">
            <image :src="$imgUrl+'logo01.png'" mode=""></image>
        </view>
        <view class="title">社区智慧养老服务平台</view>
        <view class="phone">{{phoneNum}}</view>
        <view class="switch-phone">切换账号</view>

        <!-- 按钮 -->
        <view class="btn-info">
            <view class="btn" @click="loginPhone">
                <text>一键登录</text>
            </view>
        </view>
        <!-- 操作 -->
        <view class="renzheng">
            <text>中国移动提供认证服务</text>
        </view>
        <!-- 其他方式登录 -->
        <view class="more-content">
            <text class="content">更多登录方式</text>
            <text class="iconfont icon-more more"></text>
        </view>
        <!-- 登录方式 -->
        <!-- <view class="login-way">
            <view class="way" @click="loginPhone">
                <image src="/static/wx_ico.png" mode=""></image>
                <text>一键登录</text>
            </view>
            <view class="way" @click="wxLogin">
                <image src="/static/wx_ico.png" mode=""></image>
                <text>微信登录</text>
            </view>
        </view> -->
        <view class="content-label">
            <radio-group @click="radioChange">
                <label class="radio">
                    <radio style="transform:scale(0.6)" :checked="morenxuanz" value="r1" @change="dianji" />阅读并同意<text
                        style="color: #0080F6;" @click="policy(1)">《隐私政策》</text>和<text style="color: #0080F6;"
                        @click="policy(2)">《服务协议》</text>
                </label>
            </radio-group>
        </view>
    </view>
</template>

<script>
    import {
        validatePhone
    } from '@/utils/validate.js';
    import {
        getCodeImg
    } from '@/api/login.js'
    export default {
        data() {
            return {
                // isLogin: false,
                isLoginWay: false,
                isPassword: false,
                codeText: '获取验证码',
                codeDisabled: false, //验证码禁用状态
                codeTimer: null,
                morenxuanz: false,
                phoneNum: '13954863257',
                $imgUrl:this.$imgUrl,
            };
        },
        onLoad() {       
            //隐藏手机号
            let that = this
            let number = this.phoneNum; //获取到手机号码字段
            console.log('手机号', this.phoneNum)
            let mphone = number.substring(0, 3) + '******' + number.substring(9);
            that.phoneNum = mphone
        },
        methods: {
            onRegister() {
                this.$navigateTo({
                    url: '/pagesA/login/register'
                })
            },
            // 手机号一键登录
            // 手机号一键登录
            loginPhone() {
                uni.preLogin({
                    provider: 'univerify',
                    success(res) { //预登录成功
                        // 显示一键登录选项
                        console.log(res);
                        console.log('999', 2222);
                        console.log('预登录成功');
                        uni.login({
                            provider: 'univerify',
                            univerifyStyle: { // 自定义登录框样式
                                //参考`univerifyStyle 数据结构`
                                "fullScreen": true, // 是否全屏显示，默认值： false
                                "title": '快速登录',
                                "backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff
                                "icon": {
                                    "path": "../../static/my/头像.png" // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
                                },
                                "phoneNum": {
                                    "color": "#000000", // 手机号文字颜色 默认值：#000000
                                    "fontSize": "18" // 手机号字体大小 默认值：18
                                },
                                "slogan": {
                                    "color": "#8a8b90", //  slogan 字体颜色 默认值：#8a8b90
                                    "fontSize": "12" // slogan 字体大小 默认值：12
                                },
                                // 一键登录
                                "authButton": {
                                    "normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值：#3479f5
                                    "highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
                                    "disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
                                    "textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff
                                    "title": "本机号码一键登录" // 授权按钮文案 默认值：“本机号码一键登录”
                                },
                                // 其他登录方式
                                "otherLoginButton": {
                                    "visible": "true", // 是否显示其他登录按钮，默认值：true
                                    "normalColor": "#f8f8f8", // 其他登录按钮正常状态背景颜色 默认值：#f8f8f8
                                    "highlightColor": "#dedede", // 其他登录按钮按下状态背景颜色 默认值：#dedede
                                    "textColor": "#000000", // 其他登录按钮文字颜色 默认值：#000000
                                    "title": "密码登录", // 其他登录方式按钮文字 默认值：“其他登录方式”
                                    "borderWidth": "1px", // 边框宽度 默认值：1px（仅ios支持）
                                    "borderColor": "#c5c5c5" //边框颜色 默认值： #c5c5c5（仅ios支持）
                                },
                                // 自定义按钮登录方式
                                "buttons": { // 仅全屏模式生效，配置页面下方按钮  （3.1.14+ 版本支持）  
                                    "iconWidth": "45px", // 图标宽度（高度等比例缩放） 默认值：45px  
                                    "list": [{
                                            "provider": "apple",
                                            "iconPath": "/static/test.jpg", // 图标路径仅支持本地图片  
                                        },
                                        {
                                            "provider": "weixin",
                                            "iconPath": "/static/test.jpg",
                                        }
                                    ]
                                },
                                "privacyTerms": {
                                    "defaultCheckBoxState": "true", // 条款勾选框初始状态 默认值： true
                                    "textColor": "#8a8b90", // 文字颜色 默认值：#8a8b90
                                    "termsColor": "#1d4788", //  协议文字颜色 默认值： #1d4788
                                    "prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”
                                    "suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”
                                    "fontSize": "12", // 字体大小 默认值：12,
                                    "privacyItems": [
                                        // 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
                                        {
                                            "url": "https://", // 点击跳转的协议详情页面
                                            "title": "用户服务协议" // 协议名称
                                        }
                                    ]
                                }
                            },
                            success(res) { // 登录成功
                                console.log(res);
                                this.openid = res.authResult.openid;
                                this.access_token = res.authResult.access_token;

                                console.log(this.openid);
                                console.log("access_token", this.access_token);



                                // 客户端(调用云函数)  调用云函数来实现整个业务逻辑
                                // 在得到access_token后，通过callfunction调用云函数
                                uniCloud.callFunction({
                                    name: "getPhoneNumber",
                                    data: {
                                        'openid': this.openid,
                                        'access_token': this.access_token
                                    }
                                }).then(res => {
                                    console.log("走了吗？？？")
                                    console.log("获取成功");
                                    console.log(res); // res 内容则包含手机号码
                                    // 获取用户的手机号
                                    this.phoneNumber = res.result.data.phoneNumber;
                                    console.log(this.phoneNumber);
                                    console.log(res);

                                    // return utils.request(
                                    //     "/api/api.php?action=phonelogin", //接口
                                    //     "POST",
                                    //     {
                                    //         // '参数'
                                    //     }, false, true, true)
                                    //     .then(res => {
                                    //         uni.closeAuthView() //成功关闭授权页面
                                    //         console.log('登录成功', res)
                                    //         console.log(res.code);
                                    //         if (res.code == 1) {
                                    //             setTimeout(() => {
                                    //                 uni.redirectTo({
                                    //                     url: '/pages/index/index'
                                    //                 })
                                    //             }, 500)
                                    //         }
                                    //     })
                                }).catch((err) => {
                                    // 执行失败
                                    console.log("没有获取到手机号啊！！！！！")
                                })
                            },
                            // 当用户点击自定义按钮时，会触发uni.login的fail回调[点击其他登录方式，可以跳转页面]
                            // 判断返回数据执行任意逻辑
                            fail(res) { // 登录失败
                                console.log(res.errCode)
                                console.log(res.errMsg)
                                if (res.code == "30002") {
                                    console.log('密码登录');
                                } else if (res.code == "30008") {
                                    console.log('自定义按钮登录方式');
                                }
                            }
                        })
                    },
                    fail(res) { // 预登录失败
                        // 不显示一键登录选项（或置灰）
                        // 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
                        console.log('失败', 2222);
                        console.log(res.errCode)
                        console.log(res.errMsg)
                    }
                });
            },
            // 协议
             // 协议
        policy(e) {
            // #ifdef H5
            this.$navigateTo({
                url: "/pagesA/login/agreenment",
                params: {
                    type: e,
                },
            });
            // #endif
            // #ifndef H5
            let link = "https://h5.weilankangyang.com/#/pagesA/login/agreenment?type=" + e
            uni.navigateTo({
                url: '/pagesA/login/tool?link=' + encodeURIComponent(link)
            })
            // #endif
        },
            radioChange(e) {
                this.morenxuanz = !this.morenxuanz
            },
            /**
             * 登录点击
             */
            onLogin() {

            },
            /**
             * 微信登录
             */
            wxLogin() {
                uni.showToast({
                    title: '微信登录',
                    icon: 'none'
                });
                //调用uni.login 时就会打开微信授权的页面
                // 在uni.login 的成功回调函数里面  调用uni.getUserInfo来获取微信的个人信息
                uni.login({
                    provider: 'weixin',
                    success: (loginreq) => {
                        console.log("loginreq:" + JSON.stringify(loginreq))
                        uni.getUserInfo({
                            provider: 'weixin',
                            success: (successreq) => { //拿到微信的信息   头像 昵称 等  
                                console.log("successreq" + JSON.stringify(successreq))
                            }
                        })
                    }
                })
            },

        },
        watch: {
            form: {
                handler(newValue, oldValue) {
                    // 验证码
                    if (this.isLoginWay) {
                        this.isLogin = newValue.code && newValue.phone ? true : false;
                    }
                    // 账号密码
                    if (!this.isLoginWay) {
                        this.isLogin = newValue.password && newValue.phone ? true : false;
                    }
                },
                deep: true
            }
        }
    }
</script>

<style scoped lang="scss">
    .page {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #ffffff;
    }

    .title {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-size: 48rpx;
        font-weight: 549;
        margin-bottom: 130rpx;
    }

    .phone {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-size: 48rpx;
        font-weight: 550;
        margin-bottom: 30rpx;
    }

    .switch-phone {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-size: 34rpx;
        color: #319976;
        margin-bottom: 120rpx;
    }

    .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 125rpx;
        margin-top: 100rpx;

        image {
            width: 420rpx;
            height: 120rpx;
        }
    }

    .content-label {
        position: fixed;
        bottom: 15%;
        font-size: 24rpx;
        color: #999999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30rpx 15%;
    }

    /* 按钮 */
    .btn-info {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100rpx;

        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 70%;
            height: 90rpx;
            background: linear-gradient(to left, $base, $change-clor);
            border-radius: 100rpx;
            color: #ffffff;
            font-size: 38rpx;
            // opacity: 0.4;
        }
    }

    /* 操作 */
    .renzheng {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 6%;
        height: 80rpx;

        text {
            font-size: 28rpx;
            color: #999999;
        }
    }

    .more-content {
        position: fixed;
        bottom: 23%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 80rpx;
        margin-top: 150rpx;

        .content {
            font-size: 28rpx;
            color: #959595;
        }

        .more {
            font-size: 24rpx;
            color: #959595;
            margin-left: 10rpx;
        }
    }
</style>